<template>
<div>
  <div class="fs-24 f-bold f-primary mt-20 mb-30">案例2：12345政府服务热线</div>
  <div class="flex-row">
    <div class="left-row flex-1 pr-20">
      <div class="section-title flex-row flex-row-center p-20 mb-20">
        <div class="text-center ml-20 mr-40 w100">
          <img src="@/assets/images/icon/ic-case01.png" alt="">
          <div class="fs-20 f-primary f-bold lh-28" >业务挑战</div>
        </div>
        <div class="fs-14 f-normal lh-28 flex-1">
          <div><span class="f-bold">客户名称：</span>{{name}} </div>
          <div><span class="f-bold">上云类型：</span>{{type}}</div>
          <div><span class="f-bold">案例概况：</span>{{survey}}</div>
        </div>
      </div>
      <div class="section-title flex-row flex-row-center  p-20 mb-20">
        <div class="text-center ml-20 mr-40 w100">
          <img src="@/assets/images/icon/ic-case02.png" alt="">
          <div class="fs-20 f-primary f-bold lh-28" >解决方案</div>
        </div>
        <div class="fs-14 f-normal lh-28 flex-1">
          <div><span class="f-bold">建设模式：</span>{{plan}}</div>
          <div><span class="f-bold">主要工作内容：</span>{{content}}</div>
        </div>
      </div>
      <div class="box text-center">
        <div class="fs-18 f-bold f-primary mb-20">Oracle 替换为 TeleDB for mysql，并统一建设PaaS组件能力</div>
        <img :src="img" >
      </div>
    </div>
    <div class="left-row flex-1 pl-20">
      <div class="section-title"><svg-icon iconName="biaoti2" class="mr-10"></svg-icon>案例成果</div>
      <div class="box h-box mt-20 mb-20">
        <div class="f-normal fs-14" style="width: 470px">
          <div class="mb-30">{{need}}</div>
          <div> 在分布式数据库的支撑下，12345获得多个 <span class="fs-24 f-primary">国际奖项（全国唯一）及国内奖项</span>，主要有2018年亚太区最佳呼叫中心(大型)银奖，2019年亚太区最佳公共服务金奖，2019年度中国最佳政府服务热线等。</div>
        </div>
        <img class="bg" src='@/assets/images/case/bg-1.png'/>
      </div>
      <div class="section-title "><svg-icon iconName="biaoti2" class="mr-10"></svg-icon>案例价值</div>
      <div class="box h-box mt-20  mb-20">
        <div class="fs-24 f-primary " style="width: 480px">{{worth}}</div>
        <img class="bg" src='@/assets/images/case/bg-2.png' width="300"/>
      </div>
    </div>
  </div>
</div>
</template>

<script>
  export default {
    name: 'page1',
    data () {
      return {
        img:require('@/assets/images/case/pic-2.png'),
        name: '广东政府',
        type: '业务系统核心去IOE，建设全省统一投诉举报监管平台',
        survey: '各地业务系统存在数据孤岛、开发周期长、扩展性低，并且话务并发量大、工单派发流程长、查询响应缓慢，对高可用、弹性扩展、运维支撑能力需求高，需建设统一PaaS组件能力，帮助应用快速上云',
        plan: '调研+自主实施',
        content: '建设统一PaaS组件能力平台，集合分布式数据库、分布式缓存、分布式容器、DevOps等核心组件，其中数据库使用中国电信自主可控teleDB for mysql数据库，针对去IOE进行定制开发，形成平台工具能力，帮助用户快速，高质量完成代码改造和数据迁移到mysql。',
        need: '高效稳定承载800个坐席并发年1100万话务量，支撑78条热线，51个职能部门，135个企事业单位的业务开展，大大提高为民服务水平。 ',
        // need2: '业务需求需快速交付且在线无感发布。 ',
        worth: '政务行业去O天翼云解决方案，稳定高效支撑民生服务及效能监督等业务，政务行业对组件稳定性、响应及时性要求高，天翼云分布式数据库经过了政务行业落地考验，成为最佳实践之一。'
      }
    }
  }
</script>

<style scoped lang="scss">
  .box{
    padding: 30px 40px;
    background: #101010;
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    &.h-box{
      height: 212px;
    }
    .bg{
      position: absolute;
      bottom: 20px;
      right: 20px;
    }
  }
  .lh-28{
    line-height: 28px!important;
  }
  .w100{
    width: 100px;
  }
</style>
